<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
</style>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div style="margin: 0 auto; width: 50px">
		<a href="index.jsp">返回</a>
	</div>
	<div style="clear: both;"></div>
	<style>
#image {
	width: 350px;
	height: 350px;
	background-color: red;
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
}
</style>
	<script>
		//获得鼠标的坐标
		var cx = 0;
		var cy = 0;

		document.onmousemove = function(e) {
			e = e || window.event;
			//获得鼠标的坐标
			cx = e.clientX;
			cy = e.clientY;
		}

		function monover(image) {
			var text = image.src;

			var img = "<img src='" + text + "' width='350px' height='350px'/>";

			//获得id
			var divImages = document.getElementById("image");

			divImages.style.display = "inline";
			divImages.style.left = cx - 175 + "px";
			divImages.style.top = $(document).scrollTop()+cy - 175 + "px";
			divImages.innerHTML = img; 
			
			
		}

		function monout() {
			//获得id
			var divImages = document.getElementById("image");
			divImages.style.display = "none";
		}
	</script>
	<div id="image"></div>
	<div style="width: 630px; margin: 0 auto;">
		<c:forEach items="${list }" var="info" varStatus="">
			<div style="float: left; margin-right: 10px; text-align: center;">
				<h3>${info.name }</h3>
				<p>
					<img width="200px" height="150px" src="show?id=${info.id }" onmouseover="monover(this)" onmouseout="monout()"/>
				</p>

			</div>
		</c:forEach>
	</div>

</body>
</html>